<template>
    <div id="container">
      <div id="terminal"></div>
    </div>
</template>

<script>
import { Terminal } from 'xterm'
import * as attach from 'xterm/lib/addons/attach/attach'
import * as fit from 'xterm/lib/addons/fit/fit'
Terminal.applyAddon(attach)
Terminal.applyAddon(fit)

export default {
    name:'container',
    mounted () {
        let terminalContainer = document.getElementById('terminal') //绑定html ID标签
        this.term = new Terminal({cols: 60,rows: 37,})  //初始化term 即黑窗口
        this.term.open(terminalContainer)   //在terminal标签中打开黑窗口
        // open websocket
        this.terminalSocket = new WebSocket('ws://127.0.0.1:8000/webssh/') //创建websock长连接
        this.terminalSocket.onopen = function(){
            console.log('websocket is Connected...')
        }
        this.terminalSocket.onclose = function(){
            console.log('websocket is Closed...')
        }
        this.terminalSocket.onerror = function(){
            console.log('damn Websocket is broken!')
        }
        this.term.attach(this.terminalSocket)  //将websocket返回来的命令添加到term浏览器黑窗口中
        
    // 绑定xterm到ws流中 
    },
    beforeDestroy () {
        this.terminalSocket.close()   //关闭浏览器时关闭长连接
        this.term.destroy()  //关闭浏览器时关闭浏览器黑窗口
        }
};
</script>